
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
    <link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
    <div id="overlay" class="overlay"></div>
   <div class="gallery-container" style="display: flex;">
      <div class="column" style="width: 25%;">
          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image1-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image1-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image14-%E9%BB%91%E5%A4%B4%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg" alt="黑头松鼠猴" title="黑头松鼠猴" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image14-%E9%BB%91%E5%A4%B4%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">黑头松鼠猴</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image18-%E9%BA%8B%E9%B9%BF.jpg" alt="麋鹿" title="麋鹿" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image18-%E9%BA%8B%E9%B9%BF.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">麋鹿</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image3-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image3-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image6-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image6-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>       </div>
      <div class="column" style="width: 25%;">
          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image11-%E7%99%BD%E5%B0%BE%E9%B9%BF.jpg" alt="白尾鹿" title="白尾鹿" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image11-%E7%99%BD%E5%B0%BE%E9%B9%BF.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">白尾鹿</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image16-%E6%B3%A2%E6%96%AF%E7%8C%AB.jpg" alt="波斯猫" title="波斯猫" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image16-%E6%B3%A2%E6%96%AF%E7%8C%AB.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">波斯猫</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image19-%E7%BA%A2%E6%9D%BE%E9%BC%A0.jpg" alt="红松鼠" title="红松鼠" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image19-%E7%BA%A2%E6%9D%BE%E9%BC%A0.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">红松鼠</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image5-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image5-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image8-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image8-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>       </div>
      <div class="column" style="width: 25%;">
          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image12-%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg" alt="松鼠猴" title="松鼠猴" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image12-%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">松鼠猴</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image17-%E6%A3%95%E7%86%8A.jpg" alt="棕熊" title="棕熊" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image17-%E6%A3%95%E7%86%8A.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">棕熊</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image20-%E9%98%BF%E5%B0%94%E5%8D%91%E6%96%AF%E9%A9%AC%E7%91%9F%E5%B0%94.jpg" alt="阿尔卑斯马瑟尔" title="阿尔卑斯马瑟尔" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image20-%E9%98%BF%E5%B0%94%E5%8D%91%E6%96%AF%E9%A9%AC%E7%91%9F%E5%B0%94.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">阿尔卑斯马瑟尔</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image9-%E7%BE%8E%E6%B4%B2%E9%BB%91%E7%86%8A.jpg" alt="美洲黑熊" title="美洲黑熊" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image9-%E7%BE%8E%E6%B4%B2%E9%BB%91%E7%86%8A.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">美洲黑熊</div>
          </div>       </div>
      <div class="column" style="width: 25%;">
          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image13-%E7%BA%A2%E6%9D%BE%E9%BC%A0.jpg" alt="红松鼠" title="红松鼠" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image13-%E7%BA%A2%E6%9D%BE%E9%BC%A0.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">红松鼠</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image15-%E9%BB%84%E8%85%B9%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg" alt="黄腹松鼠猴" title="黄腹松鼠猴" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image15-%E9%BB%84%E8%85%B9%E6%9D%BE%E9%BC%A0%E7%8C%B4.jpg");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">黄腹松鼠猴</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image2-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image2-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image4-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image4-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>          <div class="image-container">
              <img src="https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image7-description.png" alt="description" title="description" onmouseover="changeBackground("https://cdn.jsdelivr.net/gh/kpl0111/gallery/res/image7-description.png");" onmouseout="resetBackground();" ondblclick="toggleFullScreen(this);">
              <div class="detail-bar">description</div>
          </div>       </div>
   </div>
    <footer>
        © 2023-2023 Nefelibata. All rights reserved.
    </footer>
</body>
<script src="./js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.4.0/dist/color-thief.min.js"></script>
</html>
